import React, { Component } from 'react';
import {
  StyleSheet, Text, View, TouchableOpacity, Image, FlatList
} from "react-native";
import { NavigationEvents } from 'react-navigation';
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { Common } from '../../../../component/common/Common.js';
import { API, API_GENERATE } from '../../../../config/api';
import { PageStatusIndex } from '../../../../component/page-status/PageStatusIndex';
import HTTP from '../../../../utils/http'
const scale = GLOBAL.SCALE;

export class ApproveApplyListPage extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: '付款明细',
      headerTintColor: style.color.white,
      headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
      headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../../imgs/goBackEmpty.png')} />),
      headerStyle: {  // 头部整体样式 
        elevation: 0,
        borderBottomWidth: 0,
        backgroundColor: style.color.themeColor
      },
      headerTitleStyle: {
        flex: 1,
        textAlign: 'center'
      }
    }
  };
  constructor(props) {
    super(props);
    this.params = this.props.navigation.state.params;
    this.state = {
      status: 'data',
      refreshIcon: false,
      listData: [],
      options: []
    }
    this.totalPage = 1;
    this.reload = true;
    this.pageParams = { // TODO
      pageNo: 1,
      pageSize: 10,
      ...this.params
    }
  }

  async componentWillMount () {
    await this._initPage();
  }


  // 跳详情
  GoOrderDetails = (item) => {
    this.props.navigation.navigate('OrderDetailsPage', {
      orderId: item.orderId
    })
  }


  // 初始化数据
  _initPage = async () => {
    this.setState({
      status: this.reload ? 'loading' : 'data',
      refreshIcon: !this.reload && this.pageParams.pageNo == '1'
    })
    let res = await HTTP.POST(API_GENERATE(API.PAY_APPROVEL_DETAIL_LIST), this.pageParams);
    if (res) {
      this.totalPage = res.totalPage;
      this.setState({
        status: res && res.rows.length > 0 ? 'data' : 'empty',
        listData: this.pageParams.pageNo == '1' ? res.rows : this.state.listData.concat(res.rows),
        refreshIcon: false
      })
    } else {
      this.setState({
        refreshIcon: false,
        status: 'error'
      })
    }
  }

  // 刷新页面
  _onErrorRefresh = () => {
    this.pageParams.pageNo = 1;
    this.reload = true;
    this._initPage();
  }

  // 下拉刷新
  refresh () {
    this.pageParams.pageNo = 1;
    this.reload = false;
    this._initPage();
  }

  // 上拉翻页
  loadMore () {
    if (this.totalPage > this.pageParams.pageNo) {
      this.pageParams.pageNo++;
      this.reload = false;
      this._initPage();
    }
  }

  // 列表
  _renderListItem = (data) => {
    let { item } = data || {};
    return (
      <View>
        <View style={styles.flexList}>
          <View style={styles.flexListItem}>
            <Text style={styles.flexListItemName}>单据号</Text>
            <Text style={styles.flexMeber}>{item.sourceCode || '--'}</Text>
          </View>

          <View style={styles.flexListApply}>
            {item && this.pageParams.paymentApplySource != 'TK' ? (
              <View>
                <Text style={styles.flexListApplyText}>本次申请金额</Text>
                <Text style={[styles.flexListApplyMenber, styles.flexListApplyVaule]}>{(item.applyAmount || 0).toFixed(2)}{item.currencyName || '元'}</Text>
              </View>
            ) : null
            }
            {item.fundTypeName ? (
              <View>
                <Text style={styles.flexListApplyText}>款项类型</Text>
                <Text style={[styles.flexListApplyMenber, styles.flexListApplyType]}>{item.fundTypeName || '--'}</Text>
              </View>
            ) : null
            }

            <TouchableOpacity onPress={() => { this.GoOrderDetails(item) }}>
              <Text style={styles.flexListApplyText}>订单号</Text>
              <Text style={[styles.flexApplyMenbers, styles.flexListApplyNum]}>{item.orderId || '--'}</Text>
            </TouchableOpacity>

            {item && this.pageParams.paymentApplySource == 'FTF' ? (
              <View>
                <Text style={styles.flexListApplyText}>增值税金额</Text>
                <Text style={[styles.flexListApplyMenber, styles.flexListApplyType]}>{(item.vatAmount || 0).toFixed(2)}{item.currencyName || '元'}</Text>
              </View>
            ) : null
            }
            {item && this.pageParams.paymentApplySource == 'FTF' ? (
              <View>
                <Text style={styles.flexListApplyText}>关税金额</Text>
                <Text style={[styles.flexListApplyMenber, styles.flexListApplyType]}>{(item.tariffAmount || 0).toFixed(2)}{item.currencyName || '元'}</Text>
              </View>
            ) : null
            }
            {item && this.pageParams.paymentApplySource == 'FTF' ? (
              <View>
                <Text style={styles.flexListApplyText}>报关单号</Text>
                <Text style={[styles.flexListApplyMenber, styles.flexListApplyType]}>{item.customsDeclarationNumber || '--'}</Text>
              </View>
            ) : null
            }
            {item && this.pageParams.paymentApplySource == 'DD' ? (
              <View>
                <Text style={styles.flexListApplyText}>付款类型</Text>
                <Text style={[styles.flexListApplyMenber,]}>{item.orderPayTypeName || '--'}</Text>
              </View>
            ) : null
            }
            {item && this.pageParams.paymentApplySource == 'DD' || item && this.pageParams.paymentApplySource == 'FP' ? (
              <View>
                <Text style={styles.flexListApplyText}>订单总额</Text>
                <Text style={[styles.flexListApplyMenber,]}>{(item.orderAmount || 0).toFixed(2)}{item.currencyName || '元'}</Text>
              </View>
            ) : null
            }
            {item && this.pageParams.paymentApplySource == 'DD' || item && this.pageParams.paymentApplySource == 'FP' || item && this.pageParams.paymentApplySource == 'RK' ? (
              <View>
                <Text style={styles.flexListApplyText}>已付款全额</Text>
                <Text style={[styles.flexListApplyMenber,]}>{(item.payReceiptAmount || 0).toFixed(2)}{item.currencyName || '元'}</Text>
              </View>
            ) : null
            }
            {item && this.pageParams.paymentApplySource == 'DD' || item && this.pageParams.paymentApplySource == 'FP' || item && this.pageParams.paymentApplySource == 'RK' ? (
              <View>
                <Text style={styles.flexListApplyText}>已申请未付款金额</Text>
                <Text style={[styles.flexListApplyMenber,]}>{(item.appliedAndNonPayment || 0).toFixed(2)}{item.currencyName || '元'}</Text>
              </View>
            ) : null
            }
            {item && this.pageParams.paymentApplySource == 'DD' || item && this.pageParams.paymentApplySource == 'RK' ? (
              <View>
                <Text style={styles.flexListApplyText}>合同剩余未付款金额</Text>
                <Text style={[styles.flexListApplyMenber,]}>{(item.contractLimitAmount || 0).toFixed(2)}{item.currencyName || '元'}</Text>
              </View>
            ) : null
            }
            {item && this.pageParams.paymentApplySource == 'FP' ? (
              <View>
                <Text style={styles.flexListApplyText}>付款期限</Text>
                <Text style={[styles.flexListApplyMenber]}>{item.payExpireDays || '--'}天</Text>
              </View>
            ) : null
            }

          </View>
        </View>
      </View>
    )
  }




  render () {
    let { listData, status, refreshIcon } = this.state;
    return (
      <View style={styles.container}>
        <NavigationEvents onWillFocus={async () => {
          this._initPage();
        }} />
        {
          status == 'data' ? (
            <View style={{ flex: 1, paddingBottom: 10 * scale, }}>
              <FlatList
                data={listData}
                renderItem={this._renderListItem}
                refreshing={refreshIcon}
                onRefresh={() => { this.refresh() }}
                onEndReachedThreshold={0.1}
                onEndReached={() => { this.loadMore() }}
              />
            </View>
          ) : null
        }
        {
          status != 'data' ? (<PageStatusIndex status={status} emptyText={'暂无数据'} onErrorPress={this._onErrorRefresh} />) : null
        }
      </View >
    )
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: style.color.bgGray,
    paddingBottom: 10 * scale,
    backgroundColor: '#fff'
  },
  flexList: {
    marginTop: 14 * scale,
    borderRadius: 5 * scale,
    borderWidth: 1 * scale,
    borderStyle: 'solid',
    borderColor: style.color.bgGray,
    backgroundColor: style.color.bgGray,
    marginLeft: 12 * scale, marginRight: 12 * scale
  },
  flexListItem: {
    flexDirection: 'row',
    paddingRight: 5 * scale,
    paddingLeft: 18 * scale,
    paddingTop: 9 * scale,
    paddingBottom: 14 * scale,
  },
  flexListItemName: {
    fontSize: 12 * scale,
    color: '#000000'
  },
  flexMeber: {
    marginLeft: 11 * scale,
    fontSize: 12 * scale,
    color: '#000',
  },
  flexListApply: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingLeft: 18 * scale,
    paddingRight: 8 * scale,
  },
  flexListApplyText: {
    flexDirection: 'row',
    width: 107 * scale,
    fontSize: 12 * scale,
    paddingRight: 6 * scale,
    color: '#000',
  },
  flexListApplyMenber: {
    flexDirection: 'row',
    width: 107 * scale,
    paddingRight: 6 * scale,
    fontSize: 12 * scale,
    paddingBottom: 15 * scale,
  },
  flexApplyMenbers: {
    flexDirection: 'row',
    width: 107 * scale,
    fontSize: 12 * scale,
    paddingBottom: 15 * scale,
  },
  flexListApplyVaule: {
    color: '#E02020',
  },
  flexListApplyType: {
    color: '#000',
  },
  flexListApplyNum: {
    color: '#0091FF'
  }

})